<template>
	<z-form :model="userItem"
	        class="zhdisk-admin-password-form"
	        v-loading="loading">
		<template #form-title>
			<div class="flex justify-items-center">
				<router-link to="/admin/user-list">
					<svg-icon class="inline mr-2 cursor-pointer" name="file-type-back"></svg-icon>
				</router-link>
				<span>用户（{{userItem?.username}}）</span>
			</div>
		</template>

		<z-form-item :required="true"
		             class="expression-item">
			<div class="sm:flex sm:space-x-2 sm:border-b-0 sm:pb-0 border-b pb-2">
				<el-input :prefix-icon="KeyIcon" placeholder="请输入密码" type="password" show-password v-model="userItem.password"></el-input>
			</div>
		</z-form-item>

		<template #footer>
			<el-button type="primary" size="default" :icon="CheckBadgeIcon" @click="savePasswordData(userItem)">保存设置</el-button>
		</template>
	</z-form>
</template>

<script setup>
import {Plus, Delete, Collection, Notebook} from '@element-plus/icons-vue'
import {CheckBadgeIcon} from '@heroicons/vue/24/solid'
import {KeyIcon, FolderIcon} from '@heroicons/vue/24/outline'
import ZForm from "/src/components/form/ZForm.vue";
import ZFormItem from "/src/components/form/ZFormItem.vue";

let route = useRoute();
let router = useRouter();
let currentuserId = route.params.userId;

import useUserPassword from "~/composables/admin/user/user-password.js";
import { apiInfoSystemUser } from "~/api/user";
const { savePasswordData } = useUserPassword(router, route);

onMounted(() => {
  loadUserItem();
})

const userItem = ref({
	password:''
});
// 加载指定存储源的数据
const loadUserItem = () => {
  apiInfoSystemUser(currentuserId).then((res) => {
    userItem.value = res.data;
  })
}


</script>

<style lang="scss" scoped>
.expression-item {
	:deep(.el-input__wrapper) {
		@apply w-full sm:w-36 md:w-48 lg:w-64 xl:w-80
	}
}

.zhdisk-admin-password-form {
	:deep(.z-form-sub-title) {
		max-width: 100%;
	}

	.rules-tips {
		@apply text-sm font-bold p-1;
	}

	.rules-tips-link {
		@apply space-x-5 mt-2;
		svg {
			height: 1rem;
			line-height: 1.25rem;
			vertical-align: text-bottom;
		}
	}
}
</style>


<route lang="yaml">
meta:
  layout: admin
  name: 编辑存储源
</route>